<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>修改手机号</title>
	<link rel="stylesheet" type="text/css" href="../../../css/api.css" />
	<style>
		body {
			width: 100%;
			height: 100%;
			background: #f5f5f5;
		}

		#app .header {
			width: 100%;
			height: 44px;
			line-height: 44px;
			text-align: center;
			position: relative;
			background-color: #ffffff;
			font-size: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		#app .header img {
			width: 22px;
			height: 22px;
		}

		#app .header img:first-child {
			position: absolute;
			left: 15px;
		}

		#app .password {
			width: 100%;
			padding: 15px 15px 0;
			box-sizing: border-box;
		}

		#app .password .bgs {
			width: 100%;
			background-color: #ffffff;
			box-sizing: border-box;
			padding: 5px 15px;
			border-radius: 10px;
		}

		#app .password .tit {
			font-size: 30px;
			color: #000000;
			line-height: 30px;
		}

		#app .password .count {
			font-size: 14px;
			color: #999;
			line-height: 14px;
		}

		#app .password .count span {
			color: #ff3a24;
			margin-left: 10px;
		}

		#app .password .ipt {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20px 0;
			width: 100%;
			border-bottom: 1px solid #f5f5f5;
			position: relative;
		}

		#app .password .ipt:last-child {
			border: 0;
		}

		#app .password .ipt .text {
			flex: none;
			text-align: center;
			margin-right: 15px;
			font-size: 16px;
			color: #000000;
			line-height: 16px;
		}

		#app .password .ipt .get-code {
			flex: none;
			padding: 0 8px;
			border-radius: 25px;
			border: 1px solid #ff8657;
			color: #ff8657;
			font-size: 12px;
			line-height: 25px;
			text-align: center;
		}

		#app .password .ipt .times {
			border: 1px solid #f5f5f5;
			color: #ccc;
			background: #f5f5f5;
		}

		#app .password .ipt input {
			min-width: 0px !important;
			flex: auto;
			color: #000;
			font-weight: bold;
		}

		input::-webkit-input-placeholder {
			color: #999999;
			font-size: 14px;
			font-weight: 500;
		}

		#app .password .selec {
			font-size: 14px;
			line-height: 14px;
			margin: 50px 0;
			color: #000000;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		#app .password .btn {
			width: 100%;
			height: 50px;
			line-height: 50px;
			text-align: center;
			border-radius: 100px;
			font-size: 16px;
			margin-top: 50px;
		}

		#app .password .btns_bg {
			background: #fff;
			color: #ff3a24;
			font-weight: bold;
			margin-bottom: 20px;
		}

		#app .password .btns_top {
			background-image: linear-gradient(45deg,
					#ff3a24 0%,
					#ff5340 100%);
			color: #ffffff;
			font-weight: bold;
			margin-bottom: 20px;
		}

		.selected {
			display: none
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="header">
			<img src="../../../image/icon_return.png" alt="" onclick="back()">绑定手机号
		</div>
		<div class="password">
			<div class="bgs">
				<div class="ipt">
					<div class="text">手机号</div>
					<input id='mobile' required maxlength="11" type="tel" placeholder="请输入您的电话号码">
				</div>
				<div class="ipt">
					<div class="text">验证码</div>
					<input id='code' type="text" placeholder="请输入验证码">
					<div class="get-code" onclick="getCode()">获取验证码</div>
				</div>
			</div>

			<div class="btn btns_bg" onclick="confirm()">立即绑定</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript">
	var click = true;
	apiready = function () {
		resume("changePhone");

		$api.fixStatusBar($api.dom('.header'));

		var member_info = api.getGlobalData({
			key: 'member_info'
		})

		if (member_info.mobile) {
			$api.val($api.dom("#mobile"), member_info.mobile);
		}
	}

	function getCode() {
		let mobile = $api.trim($api.val($api.byId('mobile')));

		if (mobile.length > 0) {
		} else {
			api.toast({
				msg: '请先输入电话号码',
				duration: 2000,
				location: 'middle'
			});
			return;
		}

		if (click) {
			$api.ajax({
				url: 'api/member/send_sms',
				method: 'POST',
				data: {
					values: {
						type: 3,
						mobile: mobile
					}
				}
			}, function (ret) {
				var times = 60;
				click = false
				var timer = setInterval(function () {
					times--
					$api.html($api.dom('.get-code'), times + '秒后重新发送')
					$api.addCls($api.dom('.get-code'), 'times')
					if (times == 0) {
						clearInterval(timer)
						click = true
						$api.html($api.dom('.get-code'), '重新发送')
						$api.removeCls($api.dom('.get-code'), 'times')
					}
				}, 1000)
			});
		}
	}

	function confirm() {
		var mobile, code,
			mobile = $api.trim($api.val($api.byId('mobile')))

		if (mobile.length > 0) {
		} else {
			api.toast({
				msg: '请输入电话号码',
				duration: 2000,
				location: 'middle'
			});
			return;
		}

		code = $api.trim($api.val($api.byId('code')))
		if (code.length > 0) {
		} else {
			api.toast({
				msg: '请输入验证码',
				duration: 2000,
				location: 'middle'
			});
			return;
		}
		$api.ajax({
			url: 'api/member/mobile',
			method: 'POST',
			data: {
				values: {
					mobile: mobile,
					sms_code: code
				}
			}
		}, function (ret) {
			api.toast({
				msg: '绑定成功',
				duration: 2000,
				location: 'middle'
			});
			back();
		});
	}

	function back() {
		api.closeWin({
		});
	}
</script>

</html>
